<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!doctype html>
    <%@ page import="servlets.message.*"%>
<%@ page import="org.hibernate.SessionFactory"%>
<%@ page import="org.hibernate.Session"%>
<%@ page import="java.util.List"%>
<%@ page import="hibernate.model.*"%>
<%@ page import="hibernate.util.HibernateUtil"%>
<%@ page import="hibernate.method.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      
      .pac-container{z-index:10000 !important;
      }
      
      
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
 <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initialize"></script>
<script>
window.onload=initialize;
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
</script>
</head>
<body onload="initialize()">
<div class="page-header">
	<h2 class="page-title">DODAJ LOKAL</h2>
</div>
<div id="content">
<br />
    <div id="locationField">
      <input id="autocomplete" placeholder="Wpisz adres.."
             onFocus="geolocate()" type="text"></input>
    </div>
    
<form action="../addLocal" method="POST" name='formularz'>
    <table id="address">
      <tr>
        <td class="label">Nazwa ulicy</td>
        <td class="slimField"><input class="field" id="street_number" name="street_number"
              disabled="true" placeholder="Nr lokalu" required="required"></input></td>
              <br/>
        <td class="wideField" colspan="2"><input class="field" id="route" name="route"
              disabled="true" placeholder="Ulica" required="required"></input></td>
      </tr>
      <tr>
        <td class="label">Miasto</td>
        <td class="wideField" colspan="3"><input class="field" id="locality" name="locality"
              disabled="true" required="required"></input></td>
      </tr>
      <tr>
        <td class="label">Województwo</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1"  name="administrative_area_level_1" disabled="true" required="required"></input></td>
   <!--     <td hidden class="label">Kod pocztowy</td> -->
        <td hidden class="wideField"><input type="hidden" class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Państwo</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" name="country" disabled="true" required="required"></input></td>
      </tr>
      
      <tr>
        <td class="label">Opis</td>
        <td class="wideField" colspan="3"><input type="text" class="field"
              id=description name="description"></input></td>
      </tr>
      
      
      <tr>
				<td><input type="submit" class="mainBtn" value="Dodaj lokal" /></td>
			</tr>
    </table>
    </form>
    <br />
    <br />
    </div>
  </body>
</html>